import { useState, useEffect, useMemo } from 'react'
import { Button, SearchBar, Space, Toast } from 'antd-mobile';
import { Swiper } from 'antd-mobile';
import { Grid, Image } from 'react-vant'
import { InfiniteScroll, List, DotLoading } from 'antd-mobile';
import { Sticky } from 'react-vant'
import { Popover } from 'antd-mobile';
import { ScanningOutline,HandPayCircleOutline } from 'antd-mobile-icons';
import { BackTop, Cell } from '@nutui/nutui-react'
import axios from 'axios';
import { sleep } from 'antd-mobile/es/utils/sleep'
import 'animate.css';
import { useNavigate } from 'react-router-dom';
import { ShoppingCartO } from '@react-vant/icons';
import './App.css'
//回到顶部
const actions = [
    { key: '/top', icon: <HandPayCircleOutline />, text: 
    <BackTop target='target'></BackTop> },
];
//无限滚动
const InfiniteScrollContent = ({ hasMore }) => {
    return (<>
        {hasMore ? (<>
            <span>一大波商品正在来袭...</span>
            <DotLoading />
        </>) : (<span>--- 没有更多了 ---</span>)}
    </>);
};
//图片轮播
const colors = ['1.jpg', '2.jpg', '3.jpg']
const items = colors.map((color, index) => (<Swiper.Item key={index}>
    <div style={{ background: color }} onClick={() => {
        Toast.show(`你点击了卡片 ${index + 1}`);
    }}>
        <img src={'/' + color} alt="" style={{ width: '100%', height: "100px" }} />
    </div>
</Swiper.Item>));
export default function Home(props) {
    console.log(props);
    const [idx, setidx] = useState('')
    const navigate = useNavigate()
    const [i,seti] = useState(false)


    //无线滚动
    const [list, setList] = useState([])
    const [hasMore, setHasMore] = useState(true);
    let [len, setlen] = useState(2)
    async function loadMore() {
        setTimeout(() => {
            setlen(len + 2)
            setHasMore(len < list.length)
        }, 1000)
    }
    const [cate, setCate] = useState([])
    //获取分类
    const getCate = async () => {
        let result = await axios.get('http://127.0.0.1:3000/cate')
        if (result.data.code == 200) {
            setCate(result.data.data)
        }
    }
    //获取商品
    const getList = async () => {
        let result = await axios.get('http://127.0.0.1:3000/good')
        if (result.data.code == 200) {
            setList(result.data.data)
        }
    }

    const newList = useMemo(() => {
        if (idx == '') {
            return list
        } else {
            return list.filter(res => res.cateid == idx)
        }
    }, [idx, list])


    //跳转到搜索
    const search=async()=>{
        seti(true)
        await sleep(1000)
        navigate('/search')
    }
    useEffect(() => {
        getCate()
        getList()
    }, [])
    return (
        <div className={i?'animate__animated animate__fadeOutLeft':''}>
            {/* 导航 */}
            <Sticky offsetTop={0}>
                <div className='q-header'>
                    <h2>暴走电商</h2>
                    <div style={{ width: '50%' }}
                        onClick={search}><SearchBar placeholder='请输入内容'
                            style={{ width: "100%" }} /></div>
                </div>
            </Sticky>


            <div>
                {/* 轮播 */}
                <Swiper loop autoplay onIndexChange={i => {

                }}>
                    {items}
                </Swiper>
            </div>

            {/* 宫格 */}
            <Grid columnNum={5}>
                <Grid.Item>
                    <ShoppingCartO style={{
                        color: "red"
                    }} onClick={()=>{
                        navigate('/Type')
                    }}/>
                    商品分类
                </Grid.Item>
                <Grid.Item>
                    <ShoppingCartO style={{
                        color: "red"
                    }} />
                    领优惠券
                </Grid.Item>
                <Grid.Item>
                    <ShoppingCartO style={{
                        color: "red"
                    }} />
                    行业资讯
                </Grid.Item>
                <Grid.Item>
                    <ShoppingCartO style={{
                        color: "red"
                    }} />
                    我的收藏
                </Grid.Item>
                <Grid.Item>
                    <ShoppingCartO style={{
                        color: "red"
                    }} />
                    地址管理
                </Grid.Item>
                <Grid.Item>
                    <ShoppingCartO style={{
                        color: "red"
                    }} />
                    秒杀活动
                </Grid.Item>
                <Grid.Item>
                    <ShoppingCartO style={{
                        color: "red"
                    }} />
                    我的活动
                </Grid.Item>
                <Grid.Item>
                    <ShoppingCartO style={{
                        color: "red"
                    }} />
                    拼团活动
                </Grid.Item>

                <Grid.Item>
                    <ShoppingCartO style={{
                        color: "red"
                    }} />
                    预售管理
                </Grid.Item>
                <Grid.Item>
                    <ShoppingCartO style={{
                        color: "red"
                    }} />
                    积分商城
                </Grid.Item>
            </Grid>

            <div style={{
                display: "flex", justifyContent: "space-between",
                background: 'rgb(255,246,245)'
            }}>
                <div style={{
                    display: "flex", justifyContent: "space-around",
                    width: "50%"
                }}>
                    <span style={{ color: "red", fontWeight: "700" }}>新品</span>
                    <span style={{ color: "black", fontWeight: "700" }}>上线</span>
                    <span>|</span>
                    <span style={{ color: "red" }}>小米SU7最新上线</span>
                </div>
                <div style={{ color: "red" }}>
                    →
                </div>
            </div>

            {/* 分类 */}
            <ul style={{
                width: '100%', display: "flex", justifyContent:
                    'space-around', marginTop: "20px"
            }}>
                {cate.map(res => {
                    return <li key={res._id} style={{
                        width: '50px', height: '30px', borderRadius: "10px",
                        lineHeight: '30px', textAlign: 'center', cursor: 'pointer'
                    }} onClick={() => {
                        setidx(res._id)
                    }} className={idx == res._id ? 'active' : ''}>{res.cname}</li>
                })}
            </ul>

            {/* 内容 */}
            <List >
                {newList.slice(0, len).map((item, index) => (<List.Item key={index}>
                    <img src={'/img/' + item.imgsrc} alt="" style={{ width: "150px" }} 
                    onClick={()=>{
                        navigate('/demo',{state:{item}})
                    }}/>
                    <p style={{
                        width: '150px',
                        whiteSpace: 'nowrap', overflow: 'hidden',
                        textOverflow: 'ellipsis'
                    }}>{item.name}</p>
                    <p style={{ fontWeight: "700" }}>￥{item.price}</p>
                </List.Item>))}
                {/* 回到顶部 */}
                {/* <Popover.Menu mode='dark' actions={actions} placement='left'
                    onAction={node => node.key === '/top' ? '' : navigate(node.key)} trigger='click'>
                    <Button>点我</Button>
                </Popover.Menu> */}
            </List>
            <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
                <InfiniteScrollContent hasMore={hasMore} />
            </InfiniteScroll>


        </div>
    )
}
